<template>
	<view :style="{background: newColor.color,overflow:'hidden'}" class="pages">
        <view class="logo">
			<view class="img">
				<image mode="widthFix" src="../../static/img/log.png"></image>
			</view>
		</view>
		<view class="form re">
			<view class="username">
				<view class="get-code" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">{{getCodeText}}</view>
				<input placeholder="请输入手机号" style="width: 68%;" type="number" maxlength="11" v-model="phoneNumber" placeholder-style="color: rgba(255,255,255,0.8);"/>
			</view>
			<view class="code">
				<input placeholder="请输入验证码"  type="number" maxlength="6" v-model="code" placeholder-style="color: rgba(255,255,255,0.8);"/>
			</view>
			<view class="password">
				<input placeholder="请输入密码" v-model="passwd" maxlength="16" password=true placeholder-style="color: rgba(255,255,255,0.8);"/>
			</view>
			<view class="btn" @tap="doReg" :style="{color: newColor.color}">立即注册</view>
			<view class="res">
				<view @tap="toLogin">已有账号立即登录</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import md5 from "@/common/SDK/md5.min.js";
	export default {
		data() {
			return {
				phoneNumber:"",
				code:'',
				passwd:"",
				getCodeText:'获取验证码',
				getCodeBtnColor:"#ffffff",
				getCodeisWaiting:false
			}
		},
		onLoad() {

		},
		created() {
			this.changeTabBar()
		},
		methods: {
			changeTabBar() {
				uni.setNavigationBarColor({
				    frontColor: '#ffffff',
				    backgroundColor: this.newColor.color,
				    animation: {
				        duration: 400,
				        timingFunc: 'easeIn'
				    }
				})
			},
			Timer(){},
			getCode(){
				uni.hideKeyboard()
				if(this.getCodeisWaiting){
					return ;
				}
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){ 
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false; 
				} 
				this.getCodeText = "发送中..."
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "rgba(255,255,255,0.5)"
				//示例用定时器模拟请求效果
				this.request('common/sendMobileCode',{
					mobile: this.phoneNumber
				}).then(res=>{
					console.log(res)
					if(res.code == 200){
						uni.showToast({title: '验证码已发送',icon:"none"});
						this.setTimer();
					}
				})
				// setTimeout(()=>{
				// 	uni.showToast({title: '验证码已发送',icon:"none"});
				// 	//示例默认1234，生产中请删除这一句。
				// 	this.code=1234;
					
				// },1000)
			},
			setTimer(){
				let holdTime = 60;
				this.getCodeText = "重新获取(60)"
				this.Timer = setInterval(()=>{
					if(holdTime<=0){
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer);
						return ;
					}
					this.getCodeText = "重新获取("+holdTime+")"
					holdTime--;
					
				},1000)
			},
			doReg(){
				uni.hideKeyboard()
				//模板示例部分验证规则
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))){ 
					uni.showToast({title: '请填写正确手机号码',icon:"none"});
					return false; 
				} 
				//示例验证码，实际使用中应为请求服务器比对验证码是否正确。
				if(this.code.length < 6){ 
					uni.showToast({title: '验证码不正确',icon:"none"});
					return false; 
				}
				uni.showLoading({
					title: '提交中...'
				})
				//模板示例把用户注册信息储存在本地，实际使用中请替换为上传服务器。
				this.register()
			},
			toLogin(){ 
				uni.hideKeyboard()
				// uni.redirectTo({url: 'login'});
				// this.$Router.replace({path:'/pages/login/login'})
				this.$Router.back(1)
			},
			register(){//注册账号
				if(this.phoneNumber == ''){
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
					return
				}else if(this.code == ''){
					uni.showToast({
						title:'请输入验证码',
						icon:'none'
					})
					return
				}else if(this.passwd == ''){
					uni.showToast({
						title:'请输入密码',
						icon:'none'
					})
					return
				}
				this.request('user/mobileReg',{
					mobile: this.phoneNumber,
					code: this.code,
					password: this.passwd
				},'post').then(res=>{
					uni.hideLoading()
					if(res.code == 200){
						uni.showToast({
							title:'注册成功'
						})
						setTimeout(()=>{
							this.$Router.back(1)
						},1000)
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../static/css/login.scss";
	.pages{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		bottom: 0;
	}
</style>
